<template>
  <view class="home">
    <!-- <u-loading-page
      :loading="loading"
      loading-text="加载中..."
      loading-mode="semicircle"
    ></u-loading-page> -->
    <view v-if="role == 6" class="bg"
      ><image
        src="https://oss.xhoven.com/f62ecb794614066140b9db84fdaa319c.png"
        mode="scaleToFill"
    /></view>
    <view v-if="role == 7" class="bg"
      ><image
        src="https://oss.xhoven.com/ea4c7dd57bc6dd0e122b98efbc6f7da2.png"
        mode="scaleToFill"
    /></view>
    <view v-if="role == 8" class="bg"
      ><image
        src="https://oss.xhoven.com/11febfc3124f7d116bfcd6f12cfaf414.png"
        mode="scaleToFill"
    /></view>
    <view class="navbar">
      <view class="pic">
        <image
          src="https://oss.xhoven.com/22551c6d512d23f457a2670f454b5c41.png"
          mode="scaleToFill"
        />
      </view>
      <view class="role">{{ roleText }}助手</view>
    </view>
    <view class="info">
      <view class="top">
        <view class="logo"
          ><image :src="form.info.image" mode="scaleToFill"
        /></view>
        <view class="name">{{ form.info.name }}</view>
        <view class="scan" @click="scanEvent"
          ><image
            src="https://oss.xhoven.com/c9cf22284781867413eb963b376f255f.png"
            mode="scaleToFill"
        /></view>
      </view>
      <view class="bottom">
        <view
          :style="{
            display: 'flex',
            alignItems: 'center',
            flex: 1,
            justifyContent: 'space-around',
            marginRight: i == infoItem.length - 1 ? '' : '35rpx',
            borderRight: i == infoItem.length - 1 ? '' : '1px solid #F2F2F2',
            position: 'relative'
          }"
          v-for="(v, i) in infoItem"
          :key="i"
        >
          <view class="item" v-if="role == 8">
            <view
              class="a"
              :class="[
                v.value < 5 && v.value >= 4 ? 'red' : '',
                v.value < 4 ? 'yellow' : ''
              ]"
              >{{ v.value.toFixed(1) }}</view
            >
            <view class="b">{{ v.name }}</view>
          </view>
          <view class="item" v-if="role == 7">
            <view class="a" style="color:#3E73FE">{{ v.value }}</view>
            <view class="b">{{ v.name }}</view>
          </view>
          <view class="item" v-if="role == 6">
            <view class="a" style="color:#13D5AC">{{ v.value }}</view>
            <view class="b">{{ v.name }}</view>
          </view>
          <view
            style="background-color: #fff;position: absolute; top: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
          <view
            style="background-color: #fff;position: absolute; bottom: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
        </view>
      </view>
    </view>

    <view class="drainage">
      <view class="top" @click="goToDrainage">
        <image
          src="https://oss.xhoven.com/cc939d00cd24df6bb65d86d168997192.png"
          mode="scaleToFill"
        />
        <image
          src="https://oss.xhoven.com/0247f663c0e8f431645fa9233928b522.png"
          mode="scaleToFill"
          class="icon"
        />
      </view>
      <view class="bottom">
        <view class="line" v-for="(v, i) in drainageList" :key="i">
          <view class="icon">
            <image
              :src="`../../static/images/yl/${i + 1}.png`"
              mode="scaleToFill"
            />
          </view>
          <view class="shop-name">{{ v.shop_name }}</view>
          <view class="num">{{ v.coupon }}人</view>
          <view class="name">{{ v.nickname }}</view>
        </view>
      </view>
    </view>
    <view class="operationData card">
      <view class="top" @click="gotoOperationalData">
        <view class="pic">
          <image
            src="https://oss.xhoven.com/ed72ce49b302d8a766f90ea146f473fc.png"
            mode="scaleToFill"
          />
        </view>
        <view class="title">运营数据</view>
        <view class="arrow"><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="bottom">
        <view class="border" v-for="(v, i) in operationItem" :key="i">
          <view class="item">
            <view class="a">{{ v.value }}</view>
            <view class="b">{{ v.name }}</view>
          </view>
          <view
            style="background-color: #fff;position: absolute; top: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
          <view
            style="background-color: #fff;position: absolute; bottom: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
        </view>
      </view>
    </view>

    <view class="salesData card">
      <view class="top" @click="gotoMarketingData">
        <view class="pic">
          <image
            src="https://oss.xhoven.com/c67295b3c1ceebedeafdc8142fbbed48.png"
            mode="scaleToFill"
          />
        </view>
        <view class="title">营销数据</view>
        <view class="arrow"><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="bottom">
        <view class="border" v-for="(v, i) in salesItem" :key="i">
          <view class="item">
            <view class="a">{{ v.value }}</view>
            <view class="b">{{ v.name }}</view>
          </view>
          <view
            style="background-color: #fff;position: absolute; top: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
          <view
            style="background-color: #fff;position: absolute; bottom: 0; right: -1px; width: 1px; height: 15rpx;"
          ></view>
        </view>
      </view>
    </view>
    <Tabs />
  </view>
</template>

<script>
import Tabs from '../../components/tabs.vue'
export default {
  components: { Tabs },
  data () {
    return {
      role: '',
      form: {},
      infoItem: [],
      operationItem: [],
      salesItem: [],
      drainageList: []
      // loading: false
    }
  },
  onShow () {
    this.getDetails()
    this.getDrainageListData()
  },
  computed: {
    roleText () {
      switch (this.role) {
        case 6:
          return '卖场'
        case 7:
          return '商户'
        case 8:
          return '门店'
        default:
          break
      }
    }
  },
  methods: {
    scanEvent () {
      uni.scanCode({
        success: async aa => {
          try {
            const res = await this.$api.common.cancellation({
              number: aa.result
            })
            uni.$u.toast('核销成功!')
          } catch (error) {
            console.log(error)
            uni.$u.toast(error.msg)
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    async getDrainageListData () {
      const res = await this.$api.home.drainageRanking()
      res.data.data.splice(3)
      this.drainageList = res.data.data
    },
    async getDetails () {
      // this.loading = true
      const res = await this.$api.home.Detail()
      uni.setStorageSync('id', res.data.role_id)
      this.role = res.data.role_id
      this.form = res.data
      if (this.role == 8) {
        this.infoItem = [
          { name: '接待服务', value: res.data.info.score_server },
          { name: '产品品质', value: res.data.info.score_goods },
          { name: '售后服务', value: res.data.info.score_general }
        ]
      } else if (this.role == 7) {
        this.infoItem = [
          { name: '门店', value: res.data.info.shop_total },
          { name: '活动', value: res.data.info.activity_total },
          { name: '品牌', value: res.data.info.brand_total }
        ]
      } else if (this.role == 6) {
        this.infoItem = [
          { name: '门店', value: res.data.info.shop_total },
          { name: '活动', value: res.data.info.activity_total }
        ]
      }
      this.operationItem = [
        { name: '商品', value: res.data.operation.goods },
        { name: '关注', value: res.data.operation.attention },
        { name: '收藏', value: res.data.operation.collect },
        { name: '访客', value: res.data.operation.visitor },
        { name: '咨询', value: res.data.operation.consult },
        { name: '导航', value: res.data.operation.navigation }
      ]
      this.salesItem = [
        { name: '活动', value: res.data.sale.activity },
        { name: '领券', value: res.data.sale.coupon },
        { name: '核销', value: res.data.sale.coupon_cancel },
        { name: '引流', value: res.data.sale.drainage },
        { name: '分享', value: res.data.sale.share },
        { name: '平台', value: res.data.sale.platform }
      ]
      // this.loading = false
    },
    gotoOperationalData () {
      uni.navigateTo({ url: '/subpackages/operationalData/operationalData' })
    },
    goToDrainage () {
      uni.navigateTo({ url: '/subpackages/drainage/drainage' })
    },
    gotoMarketingData () {
      uni.setStorageSync('currentIndex', '2')
      uni.switchTab({ url: '/pages/marketing/marketing' })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100vw;
  padding: 0 30rpx;
  padding-top: 50rpx;
  padding-bottom: 50rpx;
  overflow-x: hidden;
  color: #333333;
  position: relative;
  .bg {
    z-index: -1;
    position: absolute;
    top: 0;
    left: -150rpx;
    overflow: hidden;
    border-radius: 0 0 50% 50%;
    width: 150%;
    height: 410rpx;
  }

  .navbar {
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    .pic {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50rpx;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .role {
      font-size: 36rpx;
      color: #fff;
    }
  }
  .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 120rpx;
    padding: 40rpx 30rpx;
    max-height: 260rpx;
    min-height: 260rpx;
    position: relative;
    box-shadow: 0 1rpx 14rpx 0 rgba(0, 0, 0, 0.05);
    .top {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .logo {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .name {
        font-weight: 600;
        letter-spacing: 2rpx;
      }
      .scan {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 30rpx;
      }
    }
    .bottom {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .a {
          font-weight: 600;
          font-size: 45rpx;
          color: #56cf60;
        }
        .red {
          color: #ff5757;
        }
        .yellow {
          color: #fea344;
        }
        .b {
          color: #666666;
          font-size: 28rpx;
          letter-spacing: 2rpx;
        }
      }
      .hidden {
        opacity: 0;
      }
    }
  }
  .operationData {
    margin-top: 30rpx;
    .top {
      background: linear-gradient(90deg, #e3eeff, rgba(255, 255, 255, 0));
    }
  }
  .salesData {
    margin-top: 30rpx;
    .top {
      background: linear-gradient(90deg, #e2fbff, rgba(255, 255, 255, 0));
    }
  }
  .card {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    min-height: 395rpx;
    max-height: 395rpx;
    box-shadow: 0 1rpx 14rpx 0 rgba(0, 0, 0, 0.05);
    .top {
      padding: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .pic {
        width: 47rpx;
        height: 37rpx;
      }
      .title {
        margin-left: 10rpx;
        width: 160rpx;
        font-size: 25rpx;
        letter-spacing: 2rpx;
      }
      .arrow {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .bottom {
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      width: 100%;
      margin-top: 30rpx;
      .border {
        margin-top: 30rpx;
        height: 50%;
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #f2f2f2;
        position: relative;
        &:nth-child(3n) {
          border-right: 0;
        }
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .a {
            font-size: 45rpx;
            font-weight: 600;
            color: #333333;
          }
          .b {
            font-size: 24rpx;
            color: #666666;
          }
        }
      }
    }
  }
  .drainage {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    min-height: 395rpx;
    max-height: 395rpx;
    box-shadow: 0 1rpx 14rpx 0 rgba(0, 0, 0, 0.05);
    margin-top: 40rpx;
    .top {
      width: 100%;
      height: 100rpx;
      position: relative;
      .icon {
        width: 20rpx !important;
        height: 20rpx !important;
        position: absolute;
        top: 40rpx;
        right: 25rpx;
      }
    }
    .bottom {
      padding: 0 20rpx;
      .line {
        width: 100%;
        height: 100rpx;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        &:last-child {
          border: 0;
        }
        .icon {
          width: 42rpx;
          height: 42rpx;
          margin-right: 30rpx;
        }
        .shop-name {
          color: #333;
          font-size: 25rpx;
          width: 350rpx;
        }
        .num {
          font-size: 25rpx;
          color: #3e73fe;
          width: 110rpx;
        }
        .name {
          color: #333;
          font-size: 25rpx;
          width: 110rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
